<template>
  <div class="tcBox">
    <div class="tabItem tabTitle">基础数据</div>
    <div class="tabItem" v-for="(item, index) in jcsjArr" :key="'jc' + index">
      {{ item.layerName }}
      <el-switch
        v-model="item.isShow"
        @change="toggleTC($event, item.layerId)"
      ></el-switch>
    </div>
    <div class="tabItem tabTitle">专业数据</div>
    <div class="tabItem" v-for="(item, index) in zysjArr" :key="'zy' + index">
      {{ item.layerName }}
      <el-switch
        v-model="item.isShow"
        @change="toggleTC($event, item.layerId)"
      ></el-switch>
    </div>
    <div class="tabItem tabTitle">专项数据</div>
    <div class="tabItem" v-for="(item, index) in zxsjArr" :key="'zx' + index">
      {{ item.layerName }}
      <el-switch
        v-model="item.isShow"
        @change="toggleTC($event, item.layerId)"
      ></el-switch>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jcsjArr: [],
      zysjArr: [],
      zxsjArr: [],
    }
  },
  mounted() {},
  watch: {},
  methods: {
    getTCArr: function (tcObj) {
      var tcObj = JSON.parse(JSON.stringify(tcObj))
      this.jcsjArr = tcObj.jcsjArr
      this.zysjArr = tcObj.zysjArr
      this.zxsjArr = tcObj.zxsjArr
      //   ptcArr.forEach((element, index) => {
      //     this.tcArr[index].layerName = element.layerName
      //     this.tcArr[index].isShow = element.isShow
      //   })
    },
    toggleTC: function ($event, layerId) {
      this.$parent.toggleLayerById(layerId, $event)
    },
  },
}
</script>

<style lang="scss" scoped>
.tcBox {
  width: 100%;
  //   border: 1px solid #eee;
  .tabTitle {
    color: #aaa;
  }
  .tabItem {
    margin-bottom: 5px;

    .el-switch {
      float: right;
    }
  }
}
</style>